﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职称设置</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <style>
        /* 可以添加一些自定义样式 */
        .page-container {
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }

        body {
            background-color: #FFFFCC;
        }
    </style>
</head>
<body>
    <div id="app">

        <div>您正在做的业务是：人力资源--招聘管理--录用管理--录用查询</div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="human_name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="human_sex" label="性别" width="180"></el-table-column>
            <el-table-column prop="human_age" label="年龄"></el-table-column>
            <el-table-column prop="human_major_kind_name" label="职位类别"></el-table-column>
            <el-table-column prop="human_major_name" label="职位名称"></el-table-column>
            <el-table-column prop="human_college" label="毕业院校"></el-table-column>
            <el-table-column prop="human_educated_major" label="学历专业"></el-table-column>
            <el-table-column prop="res_id" label="查看">
                <template #default="scope">
                    <el-button size="small" type="primary" v-on:click="() => goToEI(scope.row.ein_id)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加分页组件 -->
        <div class="page-container">
            <el-pagination v-on:size-change="handleSizeChange"
                           v-on:current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[4, 8, 12, 20]"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
        </div>
    </div>
    <script>
        const { createApp, ref, onMounted } = Vue;

        const app = createApp({
          setup() {

              const tableData = ref([]); // 修正变量名拼写错误
              const pageSize = ref(4);
              const currentPage = ref(1); // 初始页码应为1
              const total = ref(0); // 总记录数

              function fill() {
                  // 将分页参数添加到URL查询字符串中
                  axios.get("/ER_LYSP/Select_LY", {
                      params: {
                          CurrentPage: currentPage.value,
                          PageSize: pageSize.value
                      }
                  })
                  .then(res => {
                        tableData.value = res.data.list.itemas;
                        total.value = res.data.list.total; // 更新总记录数
                        console.log(tableData.value)
                  })
                  .catch(err => {
                      console.error("获取数据失败:", err);
                      // 可以添加错误提示
                      ElMessage.error("获取数据失败，请稍后重试");
                  });
              }

              // 页面大小变化时的处理函数
              function handleSizeChange(newSize) {
                  pageSize.value = newSize;
                  currentPage.value = 1; // 重置页码为1
                  fill();
              }

              // 当前页码变化时的处理函数
              function handleCurrentChange(newPage) {
                  currentPage.value = newPage;
                  fill();
              }


              // 初始加载数据
              onMounted(() => {
                  fill();
              });

              function goToEI(id){
                  window.location.href = `/ER_LYCX/Upd?id=${id}`;
              }

              return {
                  tableData,
                  pageSize,
                  currentPage,
                  total,
                  handleSizeChange,
                  handleCurrentChange,
                  goToEI
              }
          }
        });

        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>
